<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <title>jQuery jqGrid Demo joyopod</title>

        <link type="text/css" rel="stylesheet" href="themes/smoothness/jquery-ui-1.8.7.custom.css"/>
        <link type="text/css" rel="stylesheet" href="script/jqGrid3.8/css/ui.jqgrid.css"/>
        <link type="text/css" rel="stylesheet" href="themes/jquery.searchFilter.css"/>

        <script language="JavaScript" src="script/jquery-1.5.1.min.js"></script>
        <script language="JavaScript" src="script/jquery-ui-1.8.7.custom.min.js"></script>
        </script>


        <script language="JavaScript" src="script/jqGrid3.8/js/i18n/grid.locale-en.js">
        </script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
       
        <script language="JavaScript" src="script/jqGrid3.8/jquery.jqGrid.min.js">
        </script>
        <script language="JavaScript" src="script/jqGrid3.8/plugins/jquery.contextmenu.js"></script>

<%--    <script src="js/grid.treegrid.js" type="text/javascript"></script>--%>
    
    
    <script type="text/javascript">
    $(document).ready(function(){

      jQuery("#treegrid2").jqGrid({
            url: 'jqTreeGridServlet',
      		treeGridModel: 'adjacency',
            datatype: 'json',
		      mtype:"GET",
		          colNames: ["menu", "url"],
		            colModel: [
		       {name: 'menu',index: 'menu',hidden: false,sortable: false},
		       {name: 'url',index:'url',hidden: false}
		      ],
            height:'auto',
      width:500,
         pager: "ptreegrid2",
      treeGrid: true,
            ExpandColumn: 'menu',
      caption:'TreeGrid example Joyopod'
        });
    var ci,rowid,ptr,td;
    $('#treegrid2').contextMenu('myMenu1', {
          bindings: {
            'mchild': function(t) {
             if(ptr && rowid && ci >=1) {
              var gcn = $("#treegrid2").getFullTreeNode(ptr);
        $(gcn).each(function(i,v){
         $("td:eq("+ci+")",this).each(function(){
          if(!$("input[type='checkbox']",this).attr("checked")) {
           $(this).toggleClass("changed");
           $("input[type='checkbox']",this).attr("defaultChecked",true).attr("checked","checked");
          }
         });
        });
        ptr = rowid=ci=null;
             }
            },
            'umchild': function(t) {
             if(ptr && rowid && ci >=1) {
              var gcn = $("#treegrid2").getFullTreeNode(ptr);
        $(gcn).each(function(){
         $("td:eq("+ci+")",this).each(function(){
          if($("input[type='checkbox']",this).attr("checked")) {
           $(this).toggleClass("changed");
           $("input[type='checkbox']",this).removeAttr("checked").attr("defaultChecked","");
          }
         });
        });
        ptr = rowid=ci=null;
             }
            }
          },
          onContextMenu: function(e, menu) {
      td = e.target || e.srcElement;
      ptr = $(td).parents("tr.jqgrow")[0];
      ci = !$(td).is('td') ? $(td).parents("td:first")[0].cellIndex : td.cellIndex;
      if($.browser.msie) {
       ci = $.getAbsoluteIndex(ptr,ci);
      }
      if( ci >=1 ) {
       rowid = ptr.id;
       $('#treegrid2').setSelection(rowid,false);
       return true;
      } else {
      //alert(ptr.id+" : "+ptr.rowIndex+" : "+ci);
       return false;
      }
       }
    });
    $("#jqContextMenu").addClass("ui-widget ui-widget-content").css("font-size","12px");
    });
    
    </script>
    
 </head>
 <body>
  <div>
  </div>
<div class="content">
 <table id="treegrid2"></table> 
 <div   id="ptreegrid2"></div>
</div>
</body>
</html>